<template>
  <div>
    <button @click="comName = 'qrcode'">二维码</button>
    <button @click="comName = 'loginForm'">账号密码</button>

    <!-- 下面这个区域根据comName来决定显示什么组件 -->
    <keep-alive>
      <component :is="comName" />
    </keep-alive>

    <!-- 像v-if这种操作，如果看不到了，其实是直接从dom中移除 -->
    <!-- dom移除就相当于这个组件销毁了 -->
    <!-- <qrcode v-if="comName == 'qrcode' "/>
    <login-form v-else-if="comName == 'loginForm'" /> -->
  </div>
</template>

<script>
import qrcode from "./components/qrcode";
import loginForm from "./components/loginForm.vue";
export default {
  components: {
    qrcode,
    loginForm,
  },

  data() {
    return {
      comName: "qrcode",
    };
  },
};
</script>

<style>
</style>